<template>
  <div>
    <!-- 添加或修改资产清单表对话框 -->
    <el-dialog ref="editDialog" v-model="openFlag" :title="title" width="50%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="108px" class="dialog-form-two">
        <el-row>
          <el-col :span="24">
            <el-form-item label="名称" prop="name">
              <el-input v-model.trim="form.name" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="序列号" prop="number">
              <el-input v-model.trim="form.number" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="类型" prop="hardwareType">
              <el-select v-model="form.hardwareType">
                <el-option v-for="item in hardwareTypeList" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="型号" prop="model">
              <el-input v-model.trim="form.model" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="品牌" prop="brand">
              <el-input v-model.trim="form.brand" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="位置" prop="address">
              <el-input type="textarea" v-model.trim="form.address" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model.trim="form.remark" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>

import api from "./api.js";

const initForm = {
  hardwareType: 1
}

export default {
  props: {
  },
  data() {
    return {
      openFlag: false,
      isEdit: false,
      hardwareTypeList: [{
        label: 'RFID打印机',
        value: 1
      }, {
        label: 'RFID天线',
        value: 2
      }, {
        label: 'RFID通道门',
        value: 3
      }],
      // 表单参数
      form: {
        id: null,
        name: null,
        hardwareType: '1',
        address: null
      },
      // 表单校验
      rules: {
        name: [
          { required: true, message: "名称不能为空", trigger: "blur" }
        ],
        number: [
          { required: true, message: "序列号不能为空", trigger: "blur" }
        ],
        port: [
          { required: true, message: "类型不能为空", trigger: "blur" }
        ],
        model: [
          { required: true, message: "型号不能为空", trigger: "blur" }
        ],
        brand: [
          { required: true, message: "品牌不能为空", trigger: "blur" }
        ],
        address: [
          { required: true, message: "位置不能为空", trigger: "blur" }
        ],
      
      },
    }
  },
  computed: {
    title() {
      return this.isEdit ? "编辑" : "新增"
    }
  },
  methods: {
    open(currentRow) {
      this.openFlag = true;
      this.reset();

      if (currentRow) {
        this.isEdit = true;
        Object.assign(this.form, currentRow);
        this.handleUpdate(currentRow);
      } else {
        this.isEdit = false;
        this.form = {...initForm};
      }
    },
    // 取消按钮
    cancel() {
      this.reset();
      this.openFlag = false;
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        warehouseNo: null,
        warehouseName: null,
        address: null
      };
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      
      const id = row.id || this.ids
      api.getDetail(id).then(response => {
        this.form = response;
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.isEdit) {
            api.update(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.openFlag = false;
              this.$emit("sub");
            });
          } else {
            api.add(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.openFlag = false;
              this.$emit("sub");
            })
          }

        }
      });
    },
    
  },
  watch: {
    
  }
}


</script>

